<template>
    <div class="wrap">
        <div class="title">
            主题：<input type="text">
        </div>
        <router-link class="btn" to="/list" tag="div">+添加喜欢的餐厅</router-link>
        <div class="con">
            <pro-item v-for="(item,i) in chooseList" :key="i"
                :avgPrice="item.avgPrice"
                :defaultPic="item.defaultPic"
                :distanceStr="item.distanceStr"
                :mainCategoryName="item.mainCategoryName"
                :shopId="item.shopId"
                :shopName="item.shopName"
                :shopPower="item.shopPower"
                @del="del"
            ></pro-item>
        </div>
        <div class="bottom">
            <button>生成投票</button>
        </div>
    </div>
</template>
<script>
import proItem from '../components/proItem'
export default {
    components:{
        proItem
    },
    created(){
        this.chooseList = JSON.parse(localStorage.getItem('chooseList')) || [];
    },
    data(){
        return {
            chooseList:[]
        }
    },
    methods:{
        del(shopId){
            let delId = this.chooseList.findIndex(item => item.shopId === shopId);
            this.chooseList.splice(delId,1);
            window.localStorage.setItem('chooseList',JSON.stringify(this.chooseList));
        }
    }
}
</script>
<style>
    .title{
        width:100%;
        height:50px;
        background: #fff;
        padding:15px;
    }
</style>

